import React,{Component} from 'react'
import {connect} from 'react-redux'
import {fetchPost} from '../actions/PostAction'



class Posts extends Component{
    constructor(props){
        super(props);
        this.state={
            items:[]
        }
    }
    componentDidMount(){
       this.props.fetchPost();
    }

    render(){
        const {items}=this.state;
        console.log(this.state);

        const itemDiv=(
            items.map((item)=>{
                return (
                <div key={item.id}>
                    <h1>{item.title}</h1>
                    <p>{item.body}</p>
                </div>
                )
                
            })
        )

        return (  
        <div>
            <h1>Posts</h1>
            {itemDiv}
        </div>)
      
    }
}

const mapStateToProps=state=>({
    items:state.posts.items
})
export default  connect(null,{fetchPost})(Posts)